<template>
  <view>
    <view class="smart-panel-head">
      <view class="smart-panel-head-title ">checkbox复选框</view>
    </view>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">默认样式</view>
      <view>
        <checkbox-group>
          <checkbox value="cb1" checked="true">选中</checkbox>
          <checkbox value="cb">未选中</checkbox>
        </checkbox-group>
      </view>
      
      <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
      <view>
        <checkbox-group>
          <label style="background-color: #8A6DE9;">
            <checkbox value="cb1" checked="true" style="transform: scale(1.0);">选中</checkbox>
          </label>
          <label>
            <checkbox value="cb" style="transform: scale(1.0);">未选中</checkbox>
          </label>
        </checkbox-group>
      </view>
    </view>
    
    <view class="uni-title uni-common-mt">推荐展示样式</view>
    <view class="uni-list">
      <checkbox-group @change="checkboxChange">
        <label 
          class="uni-list-cell uni-list-cell-pd vertical-item" 
          v-for="(item, index) in items" 
          :key="item.value" 
          :class="{ 'checked-bg': item.checked }"
        >
          <checkbox :value="item.value" :checked="item.checked"></checkbox>
          <text>{{ item.name }}</text>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: 'usa', name: '美国', checked: false },
        { value: 'china', name: '中国', checked: true },   
        { value: 'brazil', name: '巴西', checked: false },
        { value: 'japan', name: '日本', checked: true },  
        { value: 'uk', name: '英国', checked: true },   
        { value: 'france', name: '法国', checked: false }
      ]
    };
  },
  methods: {
    checkboxChange(e) {
      const values = e.detail.value;
      this.items.forEach(item => {
        item.checked = values.includes(item.value);
        console.log(
          `i:${this.items.indexOf(item)}---${item.name}, index:${values.indexOf(item.value)}, isCheck: ${item.checked}`
        );
      });
    }
  }
};
</script>
<style>
.checked-bg {
  background-color: #CEFFCE;
}
.vertical-item {
  display: block;
  margin-bottom: 5px;
}
</style>